import React, { Fragment } from 'react'
import {
  View,
  StyleSheet,
  Text, ScrollView, Image
} from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import { CommonToast } from 'src/utils/ToastUtil'
import BasePage from 'src/pageP/base/base-page/index'
import CustomButton from 'src/components/button/CustomButton'
class BaseJobNature extends BasePage {
  constructor (props) {
    super(props)
    this.state = {
      header: {
      },
      workNature: []
    }
  }

 Wroknatures = [
   {
     name: '兼职',
     bgImage: require('@/imgC/userinfo/part-time-job-bg.png')
   },
   {
     name: '实习',
     bgImage: require('@/imgC/userinfo/internship-bg.png')
   },
   {
     name: '全职',
     bgImage: require('@/imgC/userinfo/full-time-bg.png')
   }
 ]

  childRender = () => {
    const {
      workNature
    } = this.state
    const workNatureValue = (workNature && workNature[0]) || ''
    return (
      <Fragment>
        <ScrollView style={styles.container} >
          <View style={[styles.jobNatureView]}>
            <View style={styles.jobNatureTitleView}>
              <Text style={styles.jobNatureTitle}>工作性质</Text>
              {this.renderStepView()}
            </View>
            <Text style={styles.jobNatureTitleStatement}>*选择自己适合的工作性质，可选1个哦！</Text>
            <View style={styles.jobNatureItemsView}>
              {this.Wroknatures.map(e =>
                <View key={e.name} style={styles.jobNatureItemView}>
                  <CustomButton
                    style={styles.jobNatureItem}
                    params={e}
                    onPress={this._jobNatureClick}>
                    <Image
                      style={styles.jobNatureItemImg}
                      source={e.bgImage}
                    />
                    <Text style={styles.jobNatureItemTitle}>{e.name}</Text>
                  </CustomButton>
                  {workNatureValue === e.name && <Image
                    style={styles.jobNatureItemSelected}
                    source={require('@/imgC/userinfo/job-nature-select.png')}/>}
                </View>
              )}
            </View>
          </View>
        </ScrollView>
        {this.renderBottomBtn()}
      </Fragment>
    )
  }

  renderStepView () {
  }

  renderBottomBtn () {
  }

  /**
   * 工作性质的选择
   * @param params
   * @private
   */
  _jobNatureClick = workNature => {
    if (workNature.disable) {
      CommonToast('已有求职意向已包含此选项')
      return
    }
    this.setState({
      workNature: [workNature.name]
    })
  }
}

export default BaseJobNature

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginBottom: ScaleS(105)
  },
  jobNatureView: {
    width: ScaleS(363),
    paddingHorizontal: ScaleS(20),
    marginHorizontal: ScaleS(6),
    backgroundColor: 'white',
    borderRadius: ScaleS(12),
    marginTop: ScaleS(30)
  },
  jobNatureTitleView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  jobNatureTitle: {
    color: '#444444',
    fontSize: ScaleT(27),
    fontWeight: '500',
    flex: 1
  },

  jobNatureTitleStatement: {
    color: '#FFC200',
    fontSize: ScaleT(14),
    fontWeight: '400',
    marginTop: ScaleS(18)
  },
  jobNatureItemsView: {
    flexDirection: 'row',
    marginTop: ScaleS(104),
    justifyContent: 'space-between',
    height: ScaleS(200)
  },
  jobNatureItemView: {
    alignItems: 'center'
  },
  jobNatureItem: {
    width: ScaleS(97),
    height: ScaleS(139),
    borderRadius: ScaleS(4),
    position: 'relative'
  },
  jobNatureItemImg: {
    width: ScaleS(97),
    height: ScaleS(139),
    borderRadius: ScaleS(4)
  },
  jobNatureItemTitle: {
    position: 'absolute',
    color: '#ffffff',
    fontSize: ScaleT(24),
    top: ScaleS(26),
    left: ScaleS(12)
  },
  jobNatureItemSelected: {
    width: ScaleS(27),
    marginTop: ScaleS(32),
    resizeMode: 'contain'
  }
})
